<!DOCTYPE HTML>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

    <link href="../cornerstone.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            Keyboard Scroll Example
        </h1>
        <p>
            This page contains an example of stack scrolling using keyboard input.
        </p>
        <p>
            <strong>Use the up and down arrow keys to scroll through the stack</strong>
        </p>
        <a href="../index.html">Go back to the Examples page</a>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-2">
            <div id="keyPressed">Pressed:</div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div style="width:512px;height:512px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image'
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="dicomImage"
                     style="width:512px;height:512px;top:0px;left:0px;position:absolute;outline:none;">
                </div>
                <div id="mrtopleft" style="position: absolute;top:3px; left:3px">
                    Patient Name
                </div>
                <div id="mrtopright" style="position: absolute;top:3px; right:3px">
                    Hospital
                </div>
                <div id="mrbottomright" style="position: absolute;bottom:6px; right:3px">
                    <div id="zoomText">Zoom: </div>
                    <div id="sliceText">Image: </div>
                </div>
                <div id="mrbottomleft" style="position: absolute;bottom:3px; left:3px">
                    WW/WC:
                </div>
            </div>
        </div>

    </div>

</body>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>

<script>
    var element = document.getElementById('dicomImage');

    function onNewImage(e) {
        var newImageIdIndex = stack.currentImageIdIndex;

        // Populate the current slice span
        var currentValueSpan = document.getElementById("sliceText");
        currentValueSpan.textContent = "Image " + (newImageIdIndex + 1) + "/" + imageIds.length;
    }

    element.addEventListener('cornerstonenewimage', onNewImage);

    function onKeyPress(e) {
        var data = e.detail;
        var keyCode = data.keyCode;
        var keyName;
        var keys = {
            UP: 38,
            DOWN: 40
        };
        if (keyCode === keys.UP) {
            keyName = 'Up arrow';
        } else if (keyCode === keys.DOWN) {
            keyName = 'Down arrow';
        } else {
            keyName = String.fromCharCode(keyCode);
        }

        document.getElementById('keyPressed').textContent = "Pressed: " + keyName;
    }

    element.addEventListener("cornerstonetoolskeydown", onKeyPress);

    var imageIds = [
        'example://1',
        'example://2'
    ];

    var stack = {
        currentImageIdIndex : 0,
        imageIds: imageIds
    };

    // Enable the dicomImage element and the mouse inputs
    cornerstone.enable(element);
    cornerstoneTools.keyboardInput.enable(element);
    cornerstone.loadImage(imageIds[0]).then(function(image) {
        // Display the image
        cornerstone.displayImage(element, image);

        // Set the stack as tool state
        cornerstoneTools.addStackStateManager(element, ['stack']);
        cornerstoneTools.addToolState(element, 'stack', stack);

        // Set the div to focused, so keypress events are handled
        element.tabIndex = 0;
        element.focus();

        // Enable all tools we want to use with this element
        cornerstoneTools.stackScrollKeyboard.activate(element);
    });

</script>
</html>
